<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格</title>
    <style>
        div{
            padding-top: 100px;
            margin-bottom: 100px;
            text-align: center;

        }

        table{
            margin: auto;
            border: 1px solid;
        }
        td{
            width: 100px;
            height: 30px;
            border: 1px solid;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入编号" id="id">
        <input type="text" placeholder="请输入姓名" id="name">
        <input type="text" placeholder="请输入性别" id="sex">
        <input type="button" value="添加" id="but-add">
    </div>

    <table id="student-table">
        <caption>学生信息表</caption>
        <tr>
            <td>选择</sub></td>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>3</td>
            <td>岳不群</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
        </tr>
    </table>

    <div>
        <input type="button" value="全选" id = "selectAll">
        <input type="button" value="全不选" id="concedeAll">
        <input type="button" value="反选" id="select-inverse">
    </div>

    <script>

        // var add = document.getElementById("but-add").onclick = function() {
        //     var table = document.getElementById("student-table"); // 获取表格
        //     var tr = document.createElement("tr");
        //     var td1 = document.createElement("td");
        //     var td2 = document.createElement("td");
        //     var td3 = document.createElement("td");
        //     var td4 = document.createElement("td");
        //     tr.appendChild(td1);
        //     tr.appendChild(td2);
        //     tr.appendChild(td3);
        //     tr.appendChild(td4);
        //     table.appendChild(tr);
        //     var id = document.getElementById("id");
        //     td1.innerHTML = id.value;
        //     var name = document.getElementById("name");
        //     td2.innerHTML = name.value;
        //     var sex = document.getElementById("sex");
        //     td3.innerHTML = sex.value;
        //     td4.innerHTML = '<a href="javascript:void(0);">删除</a>';
        // }
        // var tr = document.createElement("tr"); 
        // table.appendChild(tr);

        var add = document.getElementById("but-add").onclick = function() {
            var table = document.getElementById("student-table"); // 获取表格
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var sex = document.getElementById("sex").value;
            table.innerHTML = table.innerHTML + '<tr><td><input type = "checkbox" class="check"></td>'
                +'<td>'  + id + '</td>'
                +'<td>'  + name + '</td>'
                +'<td>'  + sex + '</td>'
                +'<td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>';
        }

        function del(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

        var selectAll = document.getElementById("selectAll").onclick = function() {
            var elems = document.getElementsByClassName("check");
            for (var i = 0 ; i < elems.length ; i++) {
                elems[i].checked = true;
            }
        }

        var concedeAll = document.getElementById("concedeAll").onclick = function() {
            var elems = document.getElementsByClassName("check");
            for (var i = 0 ; i < elems.length ; i++) {
                elems[i].checked = false;
            }
        }

        var inverse = document.getElementById("select-inverse").onclick = function() {
            var elems = document.getElementsByClassName("check");
            for (var i = 0 ; i < elems.length ; i++) {
                if (elems[i].checked) {
                    elems[i].checked = false;
                } else {
                    elems[i].checked = true;
                }
                
            }
        }


    </script>
</body>
</html>